<script setup lang="ts">
import { onMounted, nextTick, ref, reactive, watch } from 'vue';
import AVue from '../slot/A.vue';
import BVue from '../slot/B.vue';

const inpuValue = ref<string>("aaa")
const dialogVisible = ref<boolean>(false)
</script>

<template>
  <div id="contain" style="width: 100vw;height: 100vh;">
    <AVue class="aaa">
      <template #slotA="{ data }">
        <p>
          {{ data.title }}
        </p>
      </template>
      <template #slotB="{ data }">
        <p>
          {{ data.age }}

        </p>
      </template>
      <template #slotC="{ data }">
        <p id="p1">
          {{ data.sex }}
          <el-input v-model="inpuValue" placeholder="" size="normal" clearable @change=""></el-input>
        </p>
      </template>
    </AVue>
    <BVue />
    <!-- 测试弹窗 -->
    <el-dialog v-model="dialogVisible" title="Tips" width="30%">
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template> 

<style lang='less' scoped>
#contain {
  // 并不是.el-dialog有枷锁，是他的上层有，:deep相当于去掉上层的标识
  :deep(.el-dialog) {
    .el-dialog__body{
      height: 200px;
    }
    border: 5px solid tomato;
  }
}

// 就目前效果而言，scoped是为了不去影响其它组件，而不是画地为牢，不被影响。
.aaa {
  // display: flex;
  // 子组件内优先
  border: 5px solid turquoise;

  // #p1 {
  // .el-input {
  //   border: 5px solid turquoise;

  //   :deep(input) {
  //     background-color: rgb(145, 198, 22);
  //   }
  // }

  // }
}
</style>
